<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .box {
            border: 1px solid #f66;
            width: 140px;
            padding: 9px;
            box-sizing: border-box;
        }

        .box img {
            width: 120px;
        }
    </style>
</head>

<body>
    <div id='app'>

        <cart class="box" :item="{url: './1.webp',title: '插槽使用'}">
            <!-- 
                使用具名插槽的时候，需要借助  template 标签，
                给其添加一个 v-slot 指令进行绑定插槽名称
            -->
            <template v-slot:slota>
                <span style="color: red">自营</span>
            </template>

            <!-- v-slot 可以简写为 # -->
            <template #slotb>
                <!-- 在 app 模板中使用的双大括号取值都是 app 组件的值 -->
                <!-- 我如何才能拿到 cart 组件中定义的 price ? -->
                <span style="color: blue">秒杀 {{price}}</span>
            </template>
        </cart>


        <cart class="box" v-for="(item,index) in list" :key="index" :item="item">
            <span v-if="index == 1" style="color: red">自营</span>
        </cart>

    </div>
</body>

<template id="cart">
    <div>
        <img :src="item.url" alt="">
        <!-- 具有 name 属性的插槽，具名插槽，所谓的具名插槽就是可以添加一个 name 属性 -->
        <slot name="slota"></slot>
        <h3> {{item.title}} </h3>
        <slot name="slotb"></slot>
    </div>
</template>

<script>

    const cart = {
        template: '#cart',
        data() {
            return {
                price: 99
            }
        },
        props: ['item']
    }


    const app = {
        data() {
            return {
                price: 199,
                list: [
                    {
                        url: './1.webp',
                        title: '精美碗筷子'
                    }, {
                        url: './1.webp',
                        title: '精美家庭套装'
                    }, {
                        url: './1.webp',
                        title: '一人 6 件套'
                    }
                ]
            }
        },
        methods: {},
        components: {
            cart
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>